<template>
  <div v-if="false" class="login" :style="{
    background: 'url(' + login_background + ')',
    'background-repeat': 'no-repeat',
    // 'background-size': '100% 100%',
    // 'background': 'linear-gradient(257deg,#004dc3 40%, #001487 87%)',
    // 'width': '1920px',
    // 'min-height': '870px',
    // 'opacity': '0.46'
  }">
    <div class="pic-item-panel">
      <img v-if="companytype == 'default'" src="../assets/nav/standard/login/systemr.png" />
      <!-- v-if="companytype == 'default'" -->
      <!-- <div class="pic-item-content" v-if="companytype == 'xjyh'"></div> -->
    </div>
    <div class="right-main">
      <div class="content-text" style="text-align:left;">
        语音AI识别平台
      </div>
      <div class="panel-content">
        <el-form ref="loginForm" class="login-item" :model="loginForm" :rules="loginRules">
          <div class="login-item-panel">
            <div class="lgoin-text1">欢迎登录</div>
          </div>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号"
              class="item-username" prefix-icon="el-icon-query-user">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码"
              class="item-password" @keyup.enter.native="handleLogin" prefix-icon="el-icon-query-password">
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" class="item-code"
              @keyup.enter.native="handleLogin">
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
            <div style="clear: both"></div>
          </el-form-item>
          <el-checkbox v-if="false" v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
          <el-form-item style="width: 100%">
            <el-button :loading="loading" size="medium" class="login_btn" @click.native.prevent="handleLogin">
              <span v-if="!loading">登&nbsp;&nbsp;录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="version-bottom">
      Copyright © 1998 - 2022XJYH. All Rights Reserved.
    </div>
    <el-dialog id="logindialog" :title="title" :visible.sync="open" width="460px" append-to-body>
      <div style="height: 660px">
        <div class="dialog-item">
          <div class="label-num">1</div>
          <div class="label-text">手机扫码二维码下载APP</div>
          <div style="clear: both"></div>
        </div>
        <div class="dialog-item" style="margin-top: 40px; margin-bottom: 50px">
          <!--<img src="../assets/logo/appurl.png" />-->
          <div id="qrcode" ref="qrcode" class="qr-img"></div>
        </div>
        <div class="dialog-item">
          <div class="label-num">2</div>
          <div class="label-text">下载APP到电脑</div>
          <div style="clear: both"></div>
        </div>
        <div class="dialog-item" style="margin-top: 25px">
          <div class="down-label1">点击下方按钮</div>
        </div>
        <div class="dialog-item">
          <div class="down-label2">你还可以下载到电脑</div>
        </div>
        <div class="dialog-item">
          <div class="down-app" @click="downApp">
            立&nbsp;即&nbsp;下&nbsp;载
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getclientWidth, getQueryParam } from "@/utils/common";
import { getconfig } from "@/api/homepage/dws_home";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import QRCode from "qrcodejs2";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      cookiePassword: "",
      loginForm: {
        username: "admin",
        password: "dl123456",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      title: "",
      open: false,
      login_background: "",
      login_logo: "",
      companytype: "default",
      default_bk: require("../assets/nav/standard/login/systembk.png"),
      defualt_logo: require("../assets/nav/standard/login/logotitle.png"),
      xjyh_bk: require("../assets/nav/xjyh/login-background.png"),
      xjyh_logo: require("../assets/nav/xjyh/login-title.png"),
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  async created() {
    getclientWidth();
    var url = window.location.href;
    if (url.indexOf("xjyh") > -1) {
      this.login_background = this.xjyh_bk;
      this.login_logo = this.xjyh_logo;
      this.companytype = "xjyh";
    } else {
      this.login_background = this.default_bk;
      this.companytype = "default";
      this.login_logo = this.defualt_logo;
    }
    this.getCode();
    this.getCookie();
    //验证用户
    var res={token:"1298080129430"};
    this.$store
      .dispatch("UserValid", res)
      .then(() => {
        var MenuNav = "topNav";
        window.localStorage.setItem("MenuNav", MenuNav);
        this.$store.dispatch("settings/changeSetting", {
          key: "topNav",
          value: MenuNav == "topNav" ? true : false,
        });
        this.$router.push({ path: this.redirect || "/" }).catch(() => { });
      })
      .catch(() => {
      });
  },
  methods: {
    getCode() {
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              getconfig({}).then((response) => {
                var MenuNav = response.data.MenuNav;
                window.localStorage.setItem("MenuNav", MenuNav);
                this.$store.dispatch("settings/changeSetting", {
                  key: "topNav",
                  value: MenuNav == "topNav" ? true : false,
                });
              }).catch(() => {
                this.loading = false;
              });
              this.$router.push({ path: this.redirect || "/" }).catch(() => { });
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
                this.getCode();
              }
            });
        }
      });
    },
    downOpen() {
      this.open = true;
      if (this.$refs.qrcode != null) {
        this.$refs.qrcode.innerHTML = "";
      }
      this.$nextTick(() => {
        this.crateQrcode();
      });
    },
    crateQrcode() {
      this.qr = new QRCode("qrcode", {
        width: 200,
        height: 200,
        text:
          process.env.VUE_APP_BASE_API +
          "/profile/template/safetyproductapp.apk",
      });
    },
    downApp() {
      window.open(
        process.env.VUE_APP_BASE_API + "/profile/template/safetyproductapp.apk"
      );
    },
  },
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.login {
  min-width: 100%;
  min-height: 100%;
  position: relative;
  background-position: center !important;
  background-size: 100% 100% !important;
}

.version-bottom {
  width: 100%;
  height: 30px;
  font-size: 20px;
  font-family: Segoe UI, Segoe UI-Regular;
  font-weight: 400;
  text-align: center;
  color: #f5faff;
  position: absolute;
  bottom: 22px;
}

.right-main {
  right: 9%;
  width: 630px;
  height: 671px;
  position: absolute;
  top: 49%;
  transform: translateY(-50%);
}

.xjyh-img {
  width: 224px;
  height: 60px;
}

.default-img {
  width: 621px;
  height: 79px;
}

.content-text {
  width: 592px;
  height: 24px;
  font-size: 24px;
  font-family: Source Han Sans CN, Source Han Sans CN-ExtraLight;
  font-weight: lighter;
  text-align: center;
  color: #ffffff;
  line-height: 40px;
  margin-top: 10px;
}

.panel-content {
  width: 580px;
  height: 500px;
  background: linear-gradient(180deg, rgba(251, 251, 251, 0.34), #0945cf);
  border-radius: 1.42rem;
  padding-left: 49px;
  margin-top: 55px;
}

::v-deep .el-input--medium .el-input__inner {
  height: 2.85rem !important;
  line-height: 2.85rem !important;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.lgoin-text1 {
  width: 120px;
  height: 30px;
  font-size: 30px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  line-height: 25px;
}

.lgoin-text2 {
  float: left;
  margin-top: 0.71rem;
  margin-left: 1.14rem;
  font-size: 0.85rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Normal;
  font-weight: Normal;
  text-align: center;
  color: #000000;
}

.login_btn {
  width: 90%;
  background: linear-gradient(90deg, #07bf84 2%, #25e35f 80%);
  border: 0px !important;
  border: 0px;
  color: white;
  font-size: 1.42rem;
  border-radius: 8px;
  height: 56px;
  margin-top: 4px;
  border-radius: 8px;
}

.dialog-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.label-num {
  float: left;
  width: 1.57rem;
  height: 1.57rem;
  line-height: 1.57rem;
  background: #0176e7;
  color: white;
  text-align: center;
  border-radius: 50%;
}

.label-text {
  float: left;
  margin-left: 0.85rem;
  height: 1.35rem;
  font-size: 1.35rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  text-align: center;
  color: #4d4f5c;
  line-height: 1.35rem;
}

.down-label1 {
  font-size: 1rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  color: #000000;
  line-height: 1.42rem;
}

.down-label2 {
  font-size: 1rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  color: #000000;
  line-height: 1.42rem;
}

.down-app {
  width: 14.42rem;
  height: 4.5rem;
  line-height: 4.5rem;
  text-align: center;
  background: linear-gradient(180deg, #5fb3fd, #3a72f3);
  border-radius: 1.07rem;
  color: white;
  font-weight: 400;
  font-size: 1.57rem;
  margin-top: 2.57rem;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .el-col-sm-4-8 {
    width: 20%;
  }

  .el-col-sm-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-sm-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-sm-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 992px) {
  .el-col-md-4-8 {
    width: 20%;
  }

  .el-col-md-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-md-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-md-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 1200px) {
  .el-col-lg-4-8 {
    width: 20%;
  }

  .el-col-lg-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-lg-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-lg-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 1920px) {
  .el-col-lg-4-8 {
    width: 20%;
  }

  .el-col-lg-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-lg-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-lg-push-4-8 {
    position: relative;
    left: 20%;
  }
}

.pic-item-panel {
  left: 5.6%;
  width: 610px;
  height: 510px;
  position: absolute;
  top: 56.5%;
  transform: translateY(-50%);
}

.pic-item-content {
  float: right;
  margin-left: 6.25rem;
  width: 39.78rem;
  height: 30.85rem;
}

.login-item-panel {
  padding-top: 49px;
}

.item-username {
  width: 480px;
  color: #808080 !important;
  background: #ffffff !important;
  border-radius: 8px;
  border: 0px !important;
  font-size: 18px;
  margin-top: 34px;
}

::v-deep .el-icon-query-user {
  background: url("~@/assets/logo/login_user_icon.png") center no-repeat;
  width: 32px;
  height: 32px;
  margin-top: 8px;
}

::v-deep .item-username .el-input__inner {
  border-radius: 8px !important;
  height: 50px !important;
  padding: 0 40px;
  color: #808080 !important;
  background: #ffffff !important;
}

.item-password {
  width: 90%;
  border-radius: 8px;
  color: #808080 !important;
  background: #ffffff !important;
  border: 0px !important;
  font-size: 18px;
  margin-top: -1.5px;
}

::v-deep .el-icon-query-password {
  background: url("~@/assets/logo/login_password_icon.png") center no-repeat;
  width: 32px;
  height: 32px;
  margin-top: 8px;
}

::v-deep .item-password .el-input__inner {
  border-radius: 8px !important;
  height: 50px !important;
  color: #808080 !important;
  background: #ffffff !important;
  padding: 0 40px;
}

.item-code {
  float: left;
  width: 154px;
  height: 46px;
  color: #808080;
  background: #ffffff;
  border-radius: 8px;
  margin-top: -1.5px;
}

::v-deep .item-code .el-input__inner {
  width: 154px !important;
  height: 46px !important;
  border-radius: 8px !important;
  font-size: 18px;
  color: #808080 !important;
  background: #ffffff !important;
}

.login-code-img {
  width: 100px;
  height: 46px;
  margin-left: 0.71rem;
  margin-top: -2px;
  border-radius: 8px;
  position: absolute;
  cursor: pointer;
}

// ::v-deep .el-input__inner {
//   background: #fff !important;
//   border: 1px solid #dcdfe6 !important;
//   color: #606266 !important;
// }

::v-deep .el-input__inner::placeholder {
  color: #c0c4cc !important;
}

::v-deep .el-input__prefix {
  color: #c0c4cc !important;
}
</style>
